<template>
  <page-table :search-fun="queryAllUserMenu" :search-info="searchInfo" :columns="columns" :show-add="false">
    <template #searchSlot>
      <a-form-item
          name="userid"
          label="用户ID"
      >
        <a-input v-model:value.trim="searchInfo.userid" placeholder="用户ID支持模糊查询"></a-input>
      </a-form-item>
      <a-form-item
          name="username"
          label="账号"
      >
        <a-input v-model:value.trim="searchInfo.username" placeholder="账号支持模糊查询"></a-input>
      </a-form-item>
      <a-form-item
          name="nickname"
          label="昵称"
      >
        <a-input v-model:value.trim="searchInfo.nickname" placeholder="昵称支持模糊查询"></a-input>
      </a-form-item>
      <a-form-item
          name="timeRange"
          label="创建时间"
      >
        <a-config-provider :locale="zhCN">
          <a-range-picker v-model:value="searchInfo.timeRange" value-format="YYYYMMDD000000"/>
        </a-config-provider>
      </a-form-item>
    </template>
    <template #tableSlot slot-scope="{ record }">
      <div>
          <span>
            <a-tag
                v-for="fa in record.menuFatherLists"
                :key="fa"
                color="geekblue"
            >
              {{ fa.menuname }}
            </a-tag>
          </span>
          <span v-if="record.menuFatherLists.userMenuLists">
            <a-tag
                v-for="fa in record.menuFatherLists.userMenuLists"
                :key="fa"
                color="green"
            >
              {{ fa.menuname }}
            </a-tag>
          </span>
          <span v-if="record.menuFatherLists.userMenuLists.leftMenuList">
            <a-tag
                v-for="fa in record.menuFatherLists.userMenuLists.leftMenuList"
                :key="fa"
                color="volcano"
            >
              {{ fa.menuname }}
            </a-tag>
          </span>
      </div>
    </template>
  </page-table>
</template>

<script>
import PageTable from "@/components/PageTable";
import {getCurrentInstance, reactive} from "vue";
import {queryAllUserMenu} from '@/service/service';

export default {
  name: "UserMenu",
  components: {PageTable},
  setup() {
    const {proxy} = getCurrentInstance()
    const zhCN = proxy.zhCN
    const searchInfo = reactive({
      userid: '',
      username: '',
      nickname: '',
      timeRange: [],
      starttime: '',
      endtime: ''
    })
    const columns = reactive([
      {
        title: '用户ID',
        dataIndex: 'userid',
        sorter: true
      },
      {
        title: '账号',
        dataIndex: 'username'
      },
      {
        title: '昵称',
        dataIndex: 'nickname'
      },
      {
        title: '权限级别',
        dataIndex: 'authid'
      },
      {
        title: '创建时间',
        dataIndex: 'createtime'
      }
    ])

    return {
      zhCN,
      searchInfo,
      columns,
      queryAllUserMenu
    }
  }
}
</script>

<style scoped>

</style>
